<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    
    position: absolute;
}
</style>
</head>

<body>
<div></div>
<script>
var box = document.querySelector("div");
document.onkeydown = function (e){  // a 65 s 83  d 68  w 87
    console.log(e.keyCode);
    //知道你按下了什么键
    switch (e.keyCode){
        case 65:    // 左
        case 37:
            box.style.left = box.offsetLeft - 10 + "px";
            break;
        case 68:  // 右
        case 39:
            box.style.left = box.offsetLeft + 10 + "px";
            break;
        case 87:  // 上
        case 38:
            box.style.top = box.offsetTop - 10 + "px";
            break;
        case 83:  // 下
        case 40:
            box.style.top = box.offsetTop + 10 + "px";
            break;
    }
}
</script>
</body>
</html>